import React, {Component} from 'react';
import {withRouter} from 'react-router-dom';
import PropTypes from 'prop-types';
import Avatar from "@/components/avatar";
import './chatItem.scss';

class ChatItem extends Component {
  static propsTypes = {
    room: PropTypes.object.isRequired
  }

  toChat(roomId) {
    this.props.history.push(`/chatting/${roomId}`);
  }

  render() {
    const {room} = this.props;
    const {contacts, chattingMsg} = room;
    return (
      <li className={`chat-item flex ${room.isTop ? 'top-chat-item' : ''}`} key={room.roomId}
          onClick={this.toChat.bind(this, room.roomId)}>
        <div className='avatar-wrap'>
          <Avatar avatar={contacts.avatar}/>
          {/*数字徽标*/}
          {/*<span className='remind-badge-count'*/}
          {/*      style={{display: !room.hasRead ? 'block' : 'none'}}>1</span>*/}
          {/*红点徽标*/}
          <span className='remind-badge-dot' style={{display: !room.hasRead ? 'block' : 'none'}}/>
        </div>
        <div className='chat-info-wrap text-overflow'>
          <p className='chat-name text-overflow'>{contacts.username}</p>
          <p className='chat-context text-overflow'>
            {chattingMsg.length ? chattingMsg[chattingMsg.length - 1].chatContext : ''}
          </p>
        </div>
        <div className='chat-time-wrap'>
          <p className='chat-time'>
            {chattingMsg.length ? chattingMsg[chattingMsg.length - 1].time : ''}
          </p>
          {/*消息勿扰icon*/}
          <p className='chat-remind'/>
        </div>
      </li>
    )
  }

}

export default withRouter(ChatItem);
